1 00:00:00,540 --> 00:00:05,750 Now let's create a user interface that will allow people to join the queue for the battle royale. 2 00:00:05,760 --> 00:00:07,020 Or you could decline it. 3 00:00:07,020 --> 00:00:13,350 And you also want to be able to get out of the queue prior to the start of the battle if you change 4 00:00:13,350 --> 00:00:14,100 your mind. 5 00:00:14,460 --> 00:00:20,790 I'm over in my explorer window here and I want to go down to my starter guy or starter guy. 6 00:00:20,820 --> 00:00:27,760 Open that up screen guy, hit the plus and then if you don't have frame hit F or frame. 7 00:00:27,840 --> 00:00:28,370 There we go. 8 00:00:28,380 --> 00:00:29,590 We're going to add a frame. 9 00:00:29,610 --> 00:00:31,200 I'm going to call this frame. 10 00:00:31,410 --> 00:00:33,360 Battle Royale Frame. 11 00:00:36,510 --> 00:00:38,250 Battle Royale f. 12 00:00:38,250 --> 00:00:39,290 R m. 13 00:00:40,020 --> 00:00:41,520 I might change the anchor point. 14 00:00:41,550 --> 00:00:45,930 Let's go down to properties for our frame, and then I'll do a 0.5 and zero. 15 00:00:45,930 --> 00:00:49,620 So I'm going to center this in the center of my screens. 16 00:00:49,620 --> 00:00:52,590 I'm going to make the anchor point in the center of my component. 17 00:00:52,590 --> 00:00:54,660 So 0.5 is the center. 18 00:00:54,840 --> 00:01:00,780 Let's go down to position and we'll change that to 0.50. 19 00:01:01,230 --> 00:01:03,540 How about 0.01? 20 00:01:03,540 --> 00:01:06,690 So it's down from the top a little bit. 21 00:01:06,810 --> 00:01:08,730 Zero pixel offset. 22 00:01:09,360 --> 00:01:10,350 There we go. 23 00:01:10,350 --> 00:01:12,570 And we got to change the size. 24 00:01:13,410 --> 00:01:14,070 Let's do that. 25 00:01:14,070 --> 00:01:24,120 Let's make that 50% on the x zero pixel offset 0.1 on the Y zero pixel offset. 26 00:01:24,690 --> 00:01:29,460 Let's add our message label right here saying that there's going to be a battle that's happening and 27 00:01:29,460 --> 00:01:31,140 you can join or decline. 28 00:01:31,140 --> 00:01:34,050 So I'm going to go to my battle Royale frame. 29 00:01:34,620 --> 00:01:46,850 Hit the plus, add a text label and I'm going to rename my text label to Battle Royale label for label 30 00:01:46,860 --> 00:01:48,990 and we can make it a different color. 31 00:01:49,020 --> 00:01:55,410 Let's scroll up to the top and the properties and maybe something bright looks good. 32 00:01:56,250 --> 00:01:58,820 Let's change the anchor points. 33 00:01:58,830 --> 00:01:59,670 Good. 34 00:01:59,700 --> 00:02:01,530 I think the position is good. 35 00:02:01,710 --> 00:02:04,420 I'm going to change the size. 36 00:02:04,440 --> 00:02:05,970 Let's go down the size. 37 00:02:06,770 --> 00:02:08,090 It's in pixels. 38 00:02:08,120 --> 00:02:16,550 I'm going to change that to 0.6, which is 60% of the ex zero pixel offset one, which is 100% of the 39 00:02:16,550 --> 00:02:19,970 Y on the frame, zero pixel offset. 40 00:02:20,270 --> 00:02:21,170 Here we go. 41 00:02:21,170 --> 00:02:24,740 And let's change our text font. 42 00:02:24,770 --> 00:02:26,630 Maybe make it like comic or something. 43 00:02:26,660 --> 00:02:27,680 Make whatever you want. 44 00:02:29,910 --> 00:02:31,090 Here's some comic. 45 00:02:31,170 --> 00:02:33,420 You can make it bold if you want. 46 00:02:33,420 --> 00:02:38,940 And then we're going to change the label itself, the text itself with code. 47 00:02:40,260 --> 00:02:42,240 You might want to change the collar. 48 00:02:42,270 --> 00:02:44,880 Let's make a text scale to so you can make a little bigger. 49 00:02:44,880 --> 00:02:47,310 And then we might want to come up with a pixel size. 50 00:02:47,310 --> 00:02:50,040 But for now, just do text, text scale. 51 00:02:50,160 --> 00:02:51,240 Let's hit our color. 52 00:02:51,600 --> 00:02:55,020 I'll make it like bright green, but I can't really read it that well. 53 00:02:55,020 --> 00:02:56,580 So I'm going to go down to my text. 54 00:02:56,580 --> 00:02:58,110 Stroke transparency. 55 00:02:58,140 --> 00:03:02,520 Hit a one and that puts a little that puts a little outline on it. 56 00:03:04,380 --> 00:03:09,690 Now I'm going to add an except button here and a decline button here. 57 00:03:09,690 --> 00:03:15,360 So on the battle royale frame, hit the plus and then we'll do a text button. 58 00:03:16,200 --> 00:03:18,920 And then this is going to be my accept button. 59 00:03:18,930 --> 00:03:25,080 I'll do a c c t btn button. 60 00:03:26,610 --> 00:03:28,350 Let's change our button color. 61 00:03:28,590 --> 00:03:29,760 Scroll up. 62 00:03:31,110 --> 00:03:33,080 Air button color. 63 00:03:33,090 --> 00:03:33,720 Background color. 64 00:03:33,720 --> 00:03:36,300 Three Greenish. 65 00:03:37,080 --> 00:03:38,610 Should we make it the same green? 66 00:03:40,080 --> 00:03:42,670 Let's try that and then I've got a position. 67 00:03:42,690 --> 00:03:44,040 It I got to change the size. 68 00:03:44,040 --> 00:03:45,150 Oh, here's position. 69 00:03:45,150 --> 00:03:46,200 Let's do that. 70 00:03:46,350 --> 00:03:48,280 Let's change the position. 71 00:03:48,300 --> 00:03:49,950 I played around with a few numbers. 72 00:03:49,950 --> 00:04:02,050 I think 0.625 works out pretty good on the x zero pixel offset 0.15 and the Y and zero pixel offset. 73 00:04:02,070 --> 00:04:05,330 Yeah, we just got to change the size though. 74 00:04:05,340 --> 00:04:06,540 It's too big. 75 00:04:06,630 --> 00:04:07,380 Let's make it. 76 00:04:07,380 --> 00:04:10,590 You don't make it too small though, because your mobile users won't be able to use it then. 77 00:04:10,590 --> 00:04:18,300 So for size I'm going to do 0.150.7 and zero. 78 00:04:19,740 --> 00:04:20,610 Nice. 79 00:04:20,610 --> 00:04:22,950 And let's change the font. 80 00:04:23,310 --> 00:04:25,650 Make it the same as my my label. 81 00:04:25,650 --> 00:04:27,570 So I'll make that comic. 82 00:04:29,470 --> 00:04:30,560 Yeah, we could do that. 83 00:04:30,580 --> 00:04:31,810 Bold. 84 00:04:32,710 --> 00:04:34,900 This one I'm going to say, except. 85 00:04:38,290 --> 00:04:40,120 Because we're not going to change it with the code. 86 00:04:40,810 --> 00:04:42,970 Should we change the wheel? 87 00:04:42,970 --> 00:04:46,720 Keep it, keep it black, because I have that green there for the label. 88 00:04:46,720 --> 00:04:53,410 Do a tech scale that'll work and let's just go ahead and copy it. 89 00:04:53,410 --> 00:05:05,020 Let's do a control D or duplicate, I should say, and we'll make this the decline button with a D decline 90 00:05:05,560 --> 00:05:06,550 button. 91 00:05:08,250 --> 00:05:09,570 Or change the text. 92 00:05:09,570 --> 00:05:10,800 I see the text right here. 93 00:05:10,800 --> 00:05:12,660 So I'll say decline. 94 00:05:13,650 --> 00:05:19,020 And we're going to have to move it because right on top of our our accept button, let's scroll up a 95 00:05:19,020 --> 00:05:19,930 little bit. 96 00:05:19,950 --> 00:05:21,660 Font looks good. 97 00:05:22,810 --> 00:05:32,740 And there's the possession, I think for possession instead of point 6 to 5, I'll do point 8 to 5. 98 00:05:33,680 --> 00:05:35,940 Yeah, that's pretty good. 99 00:05:35,960 --> 00:05:37,290 Let's change the color, too. 100 00:05:37,310 --> 00:05:39,020 So I'm going to scroll up a little more. 101 00:05:39,710 --> 00:05:40,190 Here we go. 102 00:05:40,190 --> 00:05:41,660 Background color three. 103 00:05:41,870 --> 00:05:42,200 I don't know. 104 00:05:42,230 --> 00:05:44,780 Make it like a kind of an orange sort of look. 105 00:05:44,960 --> 00:05:46,970 So it looks like we're saying no. 106 00:05:48,650 --> 00:05:52,610 And let's make this background around the buttons transparent. 107 00:05:52,610 --> 00:05:55,490 So I'm going to go to my battle royale frame. 108 00:05:56,710 --> 00:05:58,780 And let's see, background transparency. 109 00:05:58,780 --> 00:06:00,010 I'll just make that one. 110 00:06:02,910 --> 00:06:03,810 So I could. 111 00:06:04,590 --> 00:06:05,880 Yeah, that'll work. 112 00:06:06,970 --> 00:06:08,690 That decline looks a little funny. 113 00:06:08,710 --> 00:06:09,430 That's good enough. 114 00:06:09,430 --> 00:06:10,090 You could fix it. 115 00:06:10,090 --> 00:06:11,830 You could fix it however you want. 116 00:06:13,170 --> 00:06:16,290 There's one last thing I want to add in this video. 117 00:06:16,650 --> 00:06:20,990 I'm going to add the capability for the server to contact my UI. 118 00:06:21,000 --> 00:06:28,380 So we're going to have a script in here and we're going to talk from pressing the button to bring this 119 00:06:28,380 --> 00:06:34,470 up to displaying when the battle starts and having our countdown, we're going to need something like 120 00:06:34,470 --> 00:06:35,490 a remote event. 121 00:06:35,490 --> 00:06:37,470 So open up replicated storage. 122 00:06:37,470 --> 00:06:39,270 You see, we have a bunch of remote events. 123 00:06:39,270 --> 00:06:41,880 Let's add one more for our battle royale. 124 00:06:41,910 --> 00:06:50,820 Let's do remote event and then I'll call this battle Royale. 125 00:06:51,060 --> 00:06:53,520 Ari All right. 126 00:06:53,520 --> 00:06:57,270 And now we can make our button here. 127 00:06:57,270 --> 00:07:05,160 The script on the button, talk to our UI through our Battle Royale remote event. 128 00:07:05,160 --> 00:07:08,010 Let's go ahead and do that in the next video.